<template>
    <div>
        <div class="content">
            <h4 class="title">
                <span></span>
                失踪人信息填写
            </h4>
            <table>
                <caption>失踪人信息</caption>
                <tbody>
                    <tr>
                        <td class="tit">失踪人姓名：</td>
                        <td class="ipt">
                            <input type="text" v-model='model.name' >
                        </td>
                        <td class="ms">
                            填写失踪人姓名
                        </td>
                    </tr>
                    <tr>
                        <td class="tit">失踪人性别：</td>
                        <td class="ipt">
                            <select v-model='model.sex' >
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </td>
                        <td class="ms">
                            
                        </td>
                    </tr>
                     <tr>
                        <td class="tit">失踪人年龄：</td>
                        <td class="ipt">
                            <input type="text" v-model='model.age' >
                        </td>
                        <td class="ms">
                           
                        </td>
                    </tr>
                     <tr>
                        <td class="tit">失踪人身高：</td>
                        <td class="ipt">
                            <input type="text" v-model='model.height' >
                        </td>
                        <td class="ms">
                            (例：172cm)
                        </td>
                    </tr>
                    
                    <tr>
                        <td class="tit">失踪类型：</td>
                        <td class="ipt">
                            <select  v-model='model.label'>
                                <option value="迷路走失">迷路走失</option>
                                <option value="被骗被拐">被骗被拐</option>
                                <option value="离家出走">离家出走</option>
                                <option value="失散亲友">失散亲友</option>
                                <option value="不明原因">不明原因</option>
                            </select>
                        </td>
                        <td class="ms">
                            (例：2018年3月12号)
                        </td>
                    </tr>
                     <tr>
                        <td class="tit">失踪人出生年月：</td>
                        <td class="ipt">
                            <input type="text" v-model='model.birth'>
                        </td>
                        <td class="ms">
                             (例：省、市、县)
                        </td>
                    </tr>
                    <tr>
                        <td class="tit">失踪地址：</td>
                        <td class="ipt">
                            <input type="text" v-model='model.szdidian' >
                        </td>
                        <td class="ms">
                             (例：省、市、县)
                        </td>
                    </tr>
                     <tr>
                        <td class="tit">失踪人时间：</td>
                        <td class="ipt">
                            <input type="text" v-model='model.time' >
                        </td>
                        <td class="ms">
                            （例：2018年3月12号)
                        </td>
                    </tr>
                    <tr>
                        <td class="tit">照片：</td>
                        <td class="ipt">
                            <van-uploader  v-model="uploadImages" :after-read="onRead" accept="image/*" multiple />
                        </td>
                        <td class="ms">
                            照片格式只能是 .jpg/.gif/.png　
                        </td>
                    </tr>
                    <tr>
                        <td class="tit">失踪描述</td>
                        <td class="ipt"> 
                            <textarea type="text"  v-model='model.content' />
                        </td>
                        <td class="ms">
                            
                        </td>
                    </tr>
                </tbody>
            </table>
            <table>
                <caption>
                    <p>委托人信息</p>
                    <span>以下信息不公开，请务必真实填写</span>
                </caption>
                <tbody>
                    <tr>
                        <td class="tit">联系人：</td>
                        <td class="ipt">
                            <input type="text"  v-model='model.postman'>
                        </td>
                        <td class="ms">
                           
                        </td>
                    </tr>
                    <tr>
                        <td class="tit">联系人身份证号码：</td>
                        <td class="ipt">
                            <input type="text"  >
                        </td>
                        <td class="ms">
                            
                        </td>
                    </tr>
                     <tr>
                        <td class="tit">联系电话：</td>
                        <td class="ipt">
                            <input type="text" v-model='model.phone' >
                        </td>
                        <td class="ms">
                           
                        </td>
                    </tr>
                    <tr>
                        <td class="tit">联系手机：</td>
                        <td class="ipt">
                            <input type="text"  >
                        </td>
                        <td class="ms">
                        </td>
                    </tr>
                    <tr>
                        <td class="tit">联系地址：</td>
                        <td class="ipt">
                            <input type="text"  >
                        </td>
                        <td class="ms">
                            (例：省、市、县)
                        </td>
                    </tr>
                    <tr>
                        <td class="tit">电子邮件：</td>
                        <td class="ipt">
                            <input type="text"  >
                        </td>
                        <td class="ms">
                            
                        </td>
                    </tr>
                     <tr>
                        <td class="tit">其他联系方式：</td>
                        <td class="ipt">
                            <input type="text"  >
                        </td>
                        <td class="ms">
                            (例：QQ,微信)
                        </td>
                    </tr>
                     <tr>
                        <td class="tit">失踪人是您的：</td>
                        <td class="ipt">
                            <input type="text"  >
                        </td>
                        <td class="ms">
                            (例：儿子)
                        </td>
                    </tr>
                     <tr>
                        <td class="tit">是否公开您的联系方式：</td>
                        <td class="ipt">
                            <select  >
                                <option value="">同意</option>
                                <option value="">拒绝</option>
                            </select>
                        </td>
                        <td class="ms">
                            (公开联系方式可以增加寻人几率)
                        </td>
                    </tr>
                </tbody>
            </table>

            <div class="btn" @click="tijiao">
                确认登记
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
import Axios from 'axios'
import { Uploader } from 'vant'
Vue.use(Uploader)
import { addPeople } from '@/api/Find'

export default {
    data() {
    return {
      uploadImages:[],
      model:{}
    }
  },
  methods:{
      tijiao(){
          addPeople(this.model)
          alert('发布成功')
          this.$router.push(`/find`)
      },
      onRead(file) {
         //console.log(file);  //控制台可以看见图片信息
         const param = new FormData();
         param.append("file", file.file);
         //   param.append("token", localStorage.getItem("token"));
         Axios.post("http://localhost:3000/charity/api/upload", param, {
            headers: { "Content-Type": "multipart/form-data" }
         }).then(res => {
            // this.uploadImages.push(res.data.url)
            // console.log(this.uploadImages);
         this.model.img = res.data.url
      });
    }, 
  }
}
</script>
<style lang="scss" scoped>
    .content{
        width: 1200px;
        // border: 1px solid;
        margin: auto;
        padding: 20px 0;
        .title{
            font-size: 24px;
            color: green;
            padding-left: 100px;
            display: flex;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
            span{
                display: inline-block;
                width: 5px;
                height: 30px;
                background: red;
                margin-right: 10px;
            }
        }
        table{
            width: 800px;
            margin: auto;
            margin-top: 20px;
            border: 1px solid #ccc;
            border-collapse: collapse;
            caption{
                font-size: 20px;
                font-weight: bold;
                padding-bottom: 10px;
                span{
                    font-weight: normal;
                    font-size: 14px;
                    color: green;
                }
            }
            tr{
                td{
                    border: 1px solid #ccc;
                    box-sizing: border-box;
                    padding: 8px 0;
                    font-size: 14px;
                    // text-align: center;
                }
                .tit{
                    width: 200px;
                    text-align: right;
                    padding-right: 30px;
                }
                .ipt{
                    width: 300px;
                    padding-left: 20px;
                }
                .ms{
                    padding-left: 20px;
                }
            }
        }

        .btn{
            color: #fff;
            width: 200px;
            border: 1px solid #ccc;
            text-align: center;
            height: 40px;
            line-height: 40px;
            border-radius: 8px;
            margin:auto;
            margin-top: 30px;
            cursor: pointer;
            background: green;
            opacity: .6;
        }
        .btn:hover{
            opacity: 1;
        }
    }
</style>